import React, { Component } from 'react'
// 导入图片懒加载插件
import { SimpleImg } from 'react-simple-img'
import ImageList from '@/modules/imageList'

// 做前端项目所有的技能都是为了用户体验，为了能更好地留住用户
// react项目优化的手段
// 组件懒加载：除了首页，其它的页面都使用lazy来加载
// 图片懒加载：除了首屏，其它的图片都使用lazyload来加载
export default class LazyLoad extends Component {
  abc = React.createRef<HTMLImageElement>()
  componentDidMount() {
    console.log(this.abc)
    if (!this.abc.current) {
      return
    }
    this.abc.current.addEventListener('load', e => {
      console.log(e)
    })
    this.abc.current.src =
      'https://img2.baidu.com/it/u=3280571716,3512529254&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=800&amp;h=500'
  }
  render() {
    return (
      <div>
        {ImageList.map(item => {
          // 使用图片懒加载插件simpleImg来渲染图片
          return (
            <SimpleImg
              key={item.id}
              height={300}
              src={item.image}
              alt=""
              animationDuration={5}
            ></SimpleImg>
          )
        })}

        <div>
          <img ref={this.abc} src="" alt="" />
        </div>
      </div>
    )
  }
}
